<template>
	<view
		class="write-page"
		@click="
			() => {
				this.showDate = false
			}
		"
	>
		<div class="search-blank">
			<div class="head">
				<div class="class-list">
					<div
						class="class-item"
						v-for="(item, index) in partList"
						@click="handleClass(index)"
						:class="{ active: index === partIndex }"
						:key="index"
					>
						{{ item.code === 1 ? 'Part 1' : 'Part 2 & 3' }}
					</div>
				</div>
			</div>
			<div class="tag-content">
				<!-- 类型条 -->
				<!-- <div class="tag-list">
                    <view class="tag-item" v-for="(item, index) in themList" :key="index" :class="{'tag-active': index === themIndex}">
                        {{item.code}}
                    </view>
                </div> -->
				<scroll-view
					class="tag-list scroll-view_H"
					scroll-x="true"
					:scroll-left="scrollLeft"
					:scroll-with-animation="true"
					:show-scrollbar="false"
					enhanced="true"
				>
					<div
						class="tag-item"
						v-for="(item, index) in themList"
						:key="index"
						:class="{ 'tag-active': index === themIndex }"
						@click="changeKnowledge(index)"
					>
						{{ item.code }}
					</div>
				</scroll-view>

				<div class="time-select">
					<div class="flex-list" @click.stop="showDateList">
						<text>筛选</text>
						<div class="icon-line">
							<div class="border"></div>
							<div class="border"></div>
							<div class="border"></div>
						</div>
					</div>
					<template v-if="showDate">
						<div class="spike"></div>
						<div class="time-blank">
							<div v-for="(item, index) in timeList" :key="item.code">
								<div
									class="time"
									:class="{ 'time-active': index === timeIndex }"
									@click="selectDate(index)"
								>
									{{ item.code }}
								</div>
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
		<div class="content">
			<!-- 试卷列表 -->
			<!-- <div v-for="(item, index) in testList" :key="index"> -->
			<div class="test-list">
				<div
					class="test-item"
					v-for="(sub, ind) in testList"
					:key="ind"
					@click="startExam(sub)"
				>
					<div class="main-content">
						<div class="tag">
							<span class="new" v-if="sub.isNewTopic">新题</span>
							<span class="high" v-if="sub.isFrequentTopic">高频</span>
						</div>
						<div class="title-text">{{ sub.topicType }}</div>
					</div>
					<div class="time-text">
						{{ sub.audioCount > 999 ? '999+' : sub.audioCount }}条录音 ｜
						{{ sub.time }}题库
					</div>
					<div class="process-blank">
						<div class="process-line">
							<div
								class="process"
								:style="{
									width: (sub.practicedTopicCount / sub.topicCount) * 100 + '%'
								}"
							></div>
						</div>
						<div class="process-text">
							已练
							<span style="font-weight: 600">{{ sub.practicedTopicCount }}</span>
							/{{ sub.topicCount }}
						</div>
					</div>
				</div>
				<div class="hr-line"></div>
			</div>
			<!-- </div> -->
			<uni-load-more :status="status" :content-text="contentText"></uni-load-more>
		</div>
	</view>
</template>

<script>
import { apiSpokenList, apiSpokenDateList } from '@/api/exam/exam.js'
export default {
	data() {
		return {
			status: 'more',
			contentText: {
				contentdown: '', //查看更多
				contentrefresh: '加载中',
				contentnomore: '- 已经到底了 -'
			},
			dataList: [],
			partList: [],
			themList: [],
			timeList: [],
			testList: [],
			themIndex: 0,
			timeIndex: 0,
			partIndex: 0,
			classIndex: 0,
			showDate: false,
			scrollLeft: 0,
			pageSize: 20,
			pageNum: 1,
			total: 0
		}
	},
	onShow() {
		if (this.timeList.length && this.themList.length && this.partList.length) {
			this.getDataList()
		}
	},
	onLoad() {
		this.getTypeList()
	},
	onReachBottom() {
		this.pageNum++
		this.loadMoreData()
	},
	methods: {
		// 显示事件筛选
		showDateList() {
			this.showDate = !this.showDate
		},
		changeKnowledge(index) {
			// 获取taglist的宽度
			const wquery = wx.createSelectorQuery().in(this)
			wquery
				.select('.tag-list')
				.boundingClientRect((rect) => {
					this.scrollViewWidth = rect.width
				})
				.exec()

			// 获取单个tag的内容
			const query = wx.createSelectorQuery().in(this)
			query
				.selectAll('.tag-item')
				.boundingClientRect((rects) => {
					const selectedRect = rects[index]
					const scrollLeft =
						selectedRect.width * index - (this.scrollViewWidth - selectedRect.width) / 2
					this.scrollLeft = scrollLeft > 0 ? scrollLeft : 0
				})
				.exec()

			this.themIndex = index
			// this.$nextTick(function() {
			//     this.scrollLeft = 54 * index
			// });
			this.getDataList()
		},
		handleClass(index) {
			this.partIndex = index
			this.themIndex = 0
			this.formatList()
		},
		// 整合时间、part、话题列表
		formatList() {
			this.timeList = []
			this.partList = []
			this.themList = []
			// this.dataList.forEach((item, index) => {
			//     this.timeList.push(item.code)
			// })
			this.timeList = this.dataList
			this.partList = this.dataList[this.timeIndex].value
			this.themList = this.dataList[this.timeIndex].value[this.partIndex].value

			this.getDataList()
		},
		// 获取筛选条件列表
		getTypeList() {
			apiSpokenList().then((res) => {
				this.dataList = res.data
				this.timeIndex = 0
				this.partIndex = 0
				this.formatList()
			})
		},
		// 获取试卷列表
		getDataList() {
			this.testList = []
			this.total = 0
			this.pageNum = 1
			this.status = 'more'
			this.getExamList()
		},
		// 获取试卷列表
		getExamList() {
			this.status = 'loading'
			apiSpokenDateList({
				timeStr: this.timeList[this.timeIndex].code,
				topicSeries: this.themList[this.themIndex].code,
				partType: this.partList[this.partIndex].code,
				pageSize: this.pageSize,
				pageNum: this.pageNum
			}).then((res) => {
				this.status = 'more'
				if (res.data.rows.length > 0) {
					this.testList.push(...res.data.rows)
					this.total = res.data.total
					if (res.data.rows.length < this.pageSize && this.pageNum > 1) {
						this.status = 'noMore'
					}
				} else {
					// if (this.total <= this.pageSize) {
					// 	this.status = 'more'
					// } else {
					// 	this.status = 'noMore'
					// }
					this.status = 'noMore'
				}
			})
		},
		// 选择时间
		selectDate(index) {
			this.timeIndex = index
			this.themIndex = 0
			this.partIndex = 0
			this.formatList()
			this.showDate = false
		},
		openUrl() {
			wx.navigateToMiniProgram({
				appId: 'wxa3589f1193170aa3',
				path: '/page/home/columnist/columnist?id=p_63a4234ee4b07b055828ddcd&h5Url=https%3A%2F%2FappiHOmgvWM5916.h5.xiaoeknow.com%2Fp%2Fcourse%2Fcolumn%2Fp_63a4234ee4b07b055828ddcd',
				extraData: {
					foo: 'bar'
				},
				success(res) {
					// 打开成功
				}
			})
		},
		// 加载更多
		loadMoreData() {
			console.log(111, this.status)
			if (this.status === 'noMore') {
				console.log('没有更多数据了。')
			} else {
				this.getExamList()
			}
		},
		startExam(sub) {
			const timeStr = this.timeList[this.timeIndex].code
			const topicType = sub.topicType
			const topicSeries = this.themList[this.themIndex].code
			const partType = this.partList[this.partIndex].code
			if (this.partIndex == 1) {
				uni.navigateTo({
					url:
						'/pages/exam/spokenTopicList?timeStr=' +
						timeStr +
						'&topicType=' +
						encodeURIComponent(topicType) +
						'&topicSeries=' +
						topicSeries +
						'&partType=' +
						partType
				})
			} else {
				uni.navigateTo({
					url:
						'/pages/exam/spokenExam?timeStr=' +
						timeStr +
						'&topicType=' +
						encodeURIComponent(topicType) +
						'&topicSeries=' +
						topicSeries +
						'&partType=' +
						partType
				})
			}
		}
	}
}
</script>
<style>
page {
	background-color: #f6f8fc;
}
</style>
<style scoped lang="scss">
@function torem($rpx) {
	//$rpx为需要转换的字号
	@return #{$rpx * 100 / 750 / 4}rem;
}
.search-blank {
	position: sticky;
	top: 0;
	z-index: 2;
}
.head {
	background-color: #ffffff;

	.class-list {
		height: 98rpx;
		display: flex;
		align-items: flex-end;
		// justify-content: center;
		font-size: torem(28);
		padding-bottom: 26rpx;
		box-sizing: border-box;
		.class-item {
			padding: 0 torem(30);
			color: #999999;
			position: relative;
			text-align: center;
		}

		.active {
			color: #333333;
			font-weight: bold;
			font-size: torem(28);
		}

		.active::before {
			position: absolute;
			left: calc(50% - 0.6rem);
			text-align: center;
			bottom: -8rpx;
			content: ' ';
			width: torem(36);
			height: torem(6);
			line-height: torem(6);
			// background: #fd453d;
			background: linear-gradient(-90deg, #6b9ef8, #2e55e5);
			border-radius: 3rpx;
		}
	}
}

.tag-content {
	padding: torem(20) torem(30);
	background-color: #f6f8fc;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 98rpx;
	font-size: torem(24);
	box-sizing: border-box;
	.tag-list {
		height: torem(60);
		line-height: torem(60);
		.tag-item {
			display: inline-block;
			// float: left;
			// width: torem(88);
			padding: 0 torem(15);
			height: torem(48);
			line-height: torem(48);
			text-align: center;
			background: #ffffff;
			border-radius: torem(24);
			font-size: torem(24);
			font-weight: 400;
			color: #333333;
			margin-right: torem(20);
		}

		.tag-active {
			// background-color: #fd453d;
			color: #ffffff;
			background: linear-gradient(180deg, #6b9ef8, #2e55e5);
		}
	}

	.time-select {
		position: relative;
		width: torem(100);
		text-align: right;
		.flex-list {
			display: inline-flex;
			text-align: center;
		}
		.icon-line {
			width: torem(12);
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-left: torem(7);
			.border {
				width: 100%;
				height: torem(4);
				border-radius: torem(2);
				background-color: #333333;
				margin: 1px 0;
			}
		}
		.time-blank {
			position: absolute;
			right: 0;
			top: torem(50);
			background: #ffffff;
			display: block;
			width: torem(200);
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 13rpx;

			.time {
				height: torem(60);
				border: #ececec 1px solid;
				line-height: torem(60);
				text-align: center;
				color: #333333;
			}

			.time:first-of-type {
				border-bottom: none;
			}

			.time-active {
				color: #2e55e5;
				font-size: torem(24);
			}
		}

		.spike {
			position: absolute;
			right: torem(20);
			top: torem(40);
			width: torem(10);
			height: torem(10);
			background: #ffffff;
			border-left: 1px solid #ffffff;
			border-right: 1px solid #ece9e9;
			border-bottom: 1px solid #ece9e9;
			border-top: 1px solid #ffffff;
			z-index: 2;
			transform: rotate(225deg);
		}
	}
}

.content {
	padding: 0 torem(30) torem(30) torem(30);
	background-color: #f6f8fc;
	.test-list {
		.test-item {
			// height: 156rpx;
			min-height: torem(80);
			background: #ffffff;
			border-radius: torem(10);
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: torem(20) torem(20);
			margin-bottom: torem(20);
			.main-content{
				display: inline-flex;
				align-items: center;
				width: 100%;
				.tag{
					font-size: torem(20);
					font-weight: 500;
					display: inline-flex;
					align-items: center;
					margin-right: torem(7);
					span{
						width: torem(50);
						height: torem(30);
						line-height: torem(30);
						text-align: center;
						box-sizing: border-box;
						border-radius: torem(4);
						&.new{
							background-color: rgba(248, 145, 64, .15);
							color: #FF923D;
							margin-right: torem(10);
						}
						&.high{
							background-color: rgba(108, 143, 241, .15);
							color: #6C8FF1;
						}
					}
				}
			}
			.title-text {
				font-size: torem(28);
				font-weight: 600;
				color: #333333;
				flex: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.time-text {
				font-size: torem(24);
				font-weight: 400;
				color: #999999;
			}
			.process-blank {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: torem(3);
				.process-line {
					height: torem(8);
					background: #d4d4d8;
					border-radius: torem(40);
					flex: 1;
					position: relative;
					z-index: 1;
					.process {
						position: absolute;
						left: 0;
						top: 0;
						height: torem(8);
						width: 10%;
						// background-color: red;
						border-radius: torem(4);
						background: linear-gradient(90deg, #6b9ef8, #2e55e5);
					}
				}
				.process-text {
					min-width: torem(90);
					padding-left: torem(10);
					font-size: torem(24);
					font-weight: 400;
					color: #999999;
					line-height: torem(24);
					text-align: right;
					span {
						color: #333333;
						font-size: torem(28);
					}
				}
			}
		}
	}
}

.scroll-Y {
	height: 50rpx;
}

.scroll-view_H {
	white-space: nowrap;
	width: calc(100% - 3.33rem);
}
</style>
